<template>
  <div class="createTemplate">
    <Vheader :header="header"></Vheader>
    <ul class="templateUl">
      <span>创建模板</span>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="服务器地址" prop="serveUrl">
          <el-input v-model="ruleForm.serveUrl"></el-input>
        </el-form-item>
         <el-form-item label="价格一天">
           <el-input v-model="ruleForm.timeId1"></el-input>
         </el-form-item>
         <el-form-item label="价格7天">
           <el-input v-model="ruleForm.timeId7"></el-input>
         </el-form-item>
         <el-form-item label="价格30天">
           <el-input v-model="ruleForm.timeId30"></el-input>
         </el-form-item>
         <el-form-item label="价格365天">
           <el-input v-model="ruleForm.timeId365"></el-input>
         </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择模板类型">
            <el-option label="H5" value="h5"></el-option>
            <el-option label="小程序" value="wechat"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="背景图片" prop="backgroundImg">
          <input type="file" @change="onChange">
        </el-form-item>
        <el-form-item label="模板说明" prop="desc">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="createTemplate()">立即创建</el-button>
          <el-button type="success" plain @click="getTemplate()">获取模板</el-button>
          <el-button type="info" plain @click="updateTemplate()">更新模板</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </ul>
    <Vfooter></Vfooter>
    <!--登录注册dialog-->
    <Vdialog></Vdialog>
  </div>
</template>

<script>
/*eslint-disable*/
import Vheader from './common/Vheader'
import Vfooter from './common/Vfooter'
import Vdialog from './common/Vdialog'
import { loginAction, registerAction, forgetPasswordAction } from '../axios/api/homePage_api'
// import { setActivityAction } from '../axios/api/setActivityTemplate_api'
import { createTemplateAction, getTemplateListAction, getTemplateAction, updateTemplateAction, replaceBackgroundAction } from '../axios/api/createTemplate_api'

export default {
  name: 'createTemplate',
  data () {
    var validatePhone = ''
    return {
      header: {
        userName: '',
        logout: this.logout,
        login: '',
        templateAction: this.templateAction,
        template: '返回首页'
      },
      // 控制dialog是否显示，以及显示那个模块的变量
      ruleForm: {
        title:'',
        name: '',
        serveUrl:'',
        type: '',
        backgroundImg:'',
        description:'',
        timeId1:'',
        timeId7:'',
        timeId30:'',
        timeId365:''
      },
      templateId:'',
      rules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        serveUrl: [
          { required: true, message: '请输入服务器地址', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择模板类型', trigger: 'blur' }
        ],
        backgroundImg: [
          { required: true, message: '请选取背景图片', trigger: 'blur,change' }
        ],
        desc: [
          { message: '请填写模板说明', trigger: 'blur' }
        ]
      },
    };
  },
  components: {
    Vheader,
    Vfooter,
    Vdialog
  },
  created () {
    this.getTemplate()
  },
  updated () {
    window.scroll(0, 0)
  },
  methods: {
    //获取选取的文件
    onChange($event) {
        this.ruleForm.backgroundImg = $event.target.files[0]
    },
    //返回首页
    templateAction(){
      this.$router.push({name: 'homePage'})
    },
    //创建模板参数
    async createTemplate(){
      this.$refs['ruleForm'].validate(async valid => {
        if (valid) {
          if (!this.$store.state.user) {
            this.$message({
              message: '您未登录，请先登录',
              type: 'warning'
            })
          } else {
            let { data } = await createTemplateAction(this.ruleForm)
            if (data.code === 1) {
              this.$message({
                message: "创建模板成功！",
                type: "warning"
              })
            } else {
              this.$message({
                message: "创建模板失败！",
                type: "warning"
              })
            }
          }
        } else {
          return false
        }
      })
    },
    //获取开发者模板------------未写展示页面
    async getTemplate(){
      let { data } = await getTemplateAction()
      if (data.code !== 1){
        this.$message({
          message: "用户没有创建模板"
        })
      }else{
        this.ruleForm = data.templateList
        for( let i=0; i<this.ruleForm.length; i++){
          this.ruleForm = this.ruleForm[i]
        }
      }
    },
    //更新模板
    async updateTemplate(){//还没成功
      let { data } = await updateTemplateAction(this.ruleForm)
    },
    //更新背景图片
    async replaceBackground(){//未成功
      let { data } = await replaceBackgroundAction()
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.createTemplate{
  overflow: hidden;
  background-color: #e9e9e7;
  font-family: 'SimSun';
}
  .createTemplate .templateUl{
    min-width: 1000px;
    height: 600px;
    box-shadow: 4px 4px 13px #666;
    background-color: #fff;
    margin: 28px 120px;
    padding: 50px 100px;
    justify-content: center;
    flex-direction: column;
  }
 .templateUl span{
    font-family: 'SimSun';
    font-size: 24px;
    color: #8a8a8a;
 }
  .backBtn{
    position: relative;
    width: 85%;
    height: 40px;
    font-size: 24px;
    font-family: 'SimSun';
    color: #47cb69;
    border: 1px solid #47cb69;
    border-radius: 3px;
    margin-top: 620px;
    margin-left: 7.5%;
    background-color: transparent;
  }
  .backBtn:hover{
    background-color: #47cb69;
    color: #fff;
  }
</style>
